<template>
	<view>
		<u-gap></u-gap>
		<view class="box">
			<view class="item" style="">
				<view class="">头像</view>
				<view class="" style="flex: 1;justify-content: flex-end;" @click="chooseAvatar">
					<u-image mode="aspectFill" shape="circle" width="108" height="108" :src="userInfo.headPhoto"></u-image>
				</view>
			</view>
			<view class="item">
				<view class="">账号</view>
				<view class="">{{userInfo.userName}}</view>
			</view>
			<!-- 			<view class="item">
				<view class="">修改推荐人</view>
				<view class="">
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</view> -->
		</view>
		<u-gap></u-gap>
		<view class="box">
			<!-- <view class="item">
				<view class="">密码</view>
				<view class="">
					<text> 133****5260</text>
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</view> -->
			<view class="item" @click="$u.route('/pages/user/editPayPassword/editPayPassword')">
				<view class="">支付密码</view>
				<view class="">
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</view>
		</view>
		<u-gap></u-gap>
		<view class="box">
			<view @click="realName" class="item">
				<view class="">实名认证</view>
				<view class="">
					<text>{{realState}}</text>
					<u-icon v-if="!userInfo.isCertified" name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</view>
			<navigator hover-class="none" url="/pages/user/changeNickname/changeNickname" class="item">
				<view class="">昵称</view>
				<view class="">
					<text>{{userInfo.nickName}}</text>
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</navigator>
			<navigator hover-class="none" url="/pages/user/gender/gender" class="item">
				<view class="">性别</view>
				<view class="">
					<text>{{userInfo.sex || '保密'}}</text>
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</navigator>
			<navigator hover-class="none" url="/pages/user/address/address" class="item">
				<view class="">地址管理</view>
				<view class="">
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</navigator>
		</view>
		<u-gap></u-gap>
         <view class="box">
			 <navigator hover-class="none" url="/pages/user/userInfo/accountInfo" class="item">
			 	<view class="">汇款信息</view>
			 	<view class="">
			 		<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
			 	</view>
			 </navigator>
		 </view>
		<view class="btn" @click="show = true">
			退出登录
		</view>
		<view class="safe-area-inset-bottom"></view>
		<u-modal show-cancel-button confirm-color="#FE4666" v-model="show" @confirm="confirm" content="确认退出该账户？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				userInfo: '',
				realState: '未认证',
				tip: false
			};
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo')
			let reg = new RegExp("(\\d{3})(\\d{4})(\\d{4})");
			userInfo.userName = userInfo.userName.replace(reg, "$1****$3")
			this.userInfo = userInfo
			this.$u.get('userverify/ok').then(res => {
				let approveStatus = ''
				switch (res.approveStatus) {
					case 20:
						approveStatus = '已认证'
						break
					case 10:
						approveStatus = '已提交认证'
						break
					case 0:
						approveStatus = '认证失败'
						break
				}
				if (!res.approveStatus) {
					approveStatus = '未认证'
				}
				this.realState = approveStatus
			})
		},
		watch: {
			tip(newV, oldV) {
				if (newV) {
					uni.showToast({
						title: '暂未开放！',
						icon: 'none'
					})
				}
			}
		},
		onLoad() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				uni.showLoading({
					title: '正在上传...',
					mask: true
				});
				const self = this
				uni.uploadFile({
					url: this.$u.http.config.baseUrl + '/upload/userPhoto',
					filePath: path,
					name: 'file',
					async success(res) {
						let data = JSON.parse(res.data)
						if (data.code != 0) {
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							return
						}
						await self.$u.post('user/info/update', {
							headPhoto: data.data[0].path + '/' + data.data[0].name
						})
						let userInfo = await self.$u.get('user/info')
						userInfo.headPhoto = self.imageURL + userInfo.headPhoto
						uni.setStorageSync('userInfo', userInfo)
						self.userInfo = userInfo
					},
					fail(error) {
						uni.showToast({
							title: '上传失败！',
							icon: 'none'
						})
					}
				})
			})
		},
		methods: {
			realName() {
				if (this.realState == '已认证') {
					uni.showToast({
						title: '已认证成功'
					})
					return
				}
				if (this.realState == '已提交认证') {
					uni.showToast({
						title: '已提交认证，请等待审核',
						icon: 'none'
					})
					return
				}
				let realState = this.realState == '未认证' ? 0 : 1
				this.$u.route('/pages/user/realName/realName', {
					realState: realState
				})
			},
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					success: res => {
						uni.setStorageSync('avatarFile', res)
						this.$u.route({
							// 关于此路径，请见下方"注意事项"
							url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
							params: {
								// 输出图片宽度，高等于宽，单位px
								destWidth: 280,
								// 裁剪框宽度，高等于宽，单位px
								rectWidth: 280
							}
						})
					}
				});
			},
			async confirm() {
				await this.$u.get('user/logout', {}, {
					'Authorization': 'Bearer ' + uni.getStorageSync('userToken').id
				})
				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('userToken');
				uni.clearStorageSync();
				uni.showToast({
					title: '已退出',
					mask: true
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/user/login/login'
					});
				}, 1500)
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		line-height: 100rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		background: linear-gradient(90deg, #FF3868, #FC6161);
		box-shadow: 1px 10px 15px 2px rgba(255, 78, 70, 0.3);
		border-radius: 20rpx;
	}

	page {
		background-color: #f7f7f7;
		padding: 0 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}

	.box {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E8E7E7;

			>view {
				&:first-child {
					font-size: 28rpx;
				}

				&:last-child {
					display: flex;
					align-items: center;

					text {
						margin-right: 10rpx;
					}
				}
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}
</style>
